<template>
  <div align="center">
    <div>
      <label>请选择小区所在区域：</label>
      <el-select v-model="province" placeholder="请选择省" style="width: 120px" @change="getCities">
        <el-option
          v-for="item in optionsProvince"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="city" placeholder="请选择市" style="padding-left:20px; width: 120px;" @change="getDistricts">
        <el-option
          v-for="item in optionsCity"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="district" placeholder="请选择区" style="padding-left:20px; width: 120px;" @change="geCommunities">
        <el-option
          v-for="item in optionsDistrict"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <br>
    <baidu-map class="map" :center=position :zoom="15">
      <bm-marker :position=position :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      </bm-marker>
    </baidu-map>
    <el-row style="padding-top: 10px">
      <el-col :span="20" :push='2'>
        <div class="table">
          <el-table
            :data=communities
            border
            style="width: 96%">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              type="index"
              label="编号"
              align="center"
              width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="类型"
              align="center"
              width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.type}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              align="center"
              width="260">
              <template slot-scope="scope">
                <span>{{ scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="地址"
              align="center"
              width="260">
              <template slot-scope="scope">
                <i class="el-icon-location-information" @click="searchAddress(scope.row.longitude, scope.row.latitude)">{{scope.row.address
                  }}</i>
              </template>
            </el-table-column>
            <el-table-column
              label="广告点位"
              align="center"
              width="165">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="getSpotsByCommunity(scope.row.id)">查看</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogTableVisible" title="所拥有的广告位" width="50%">
      <el-table border :data="spotList">
        <el-table-column label="编号" property="id" width="220" align="center"></el-table-column>
        <el-table-column label="类型" property="spotType" width="180" align="center"></el-table-column>
        <el-table-column label="规格" property="spotSize" width="180" align="center"></el-table-column>
        <el-table-column label="状态" width="180" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isBusy===false && scope.row.isRepair===false">空闲</span>
            <span v-if="scope.row.isBusy===true && scope.row.isRepair===false">使用中</span>
            <span v-if="scope.row.isRepair===true">维修中</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import communityMapApi from '@/api/community/communityMap'
import communityApi from '@/api/community/community'

export default {
  name: 'districtList',
  data () {
    return {
      position: {lng: 113, lat: 23}, // 小区地图显示位置
      dialogTableVisible: false, // 所选小区的广告位信息显示控制
      province: '', // 选择框里面省值
      city: '', // 选择框里面的市值
      district: '', // 选择框里面的区值
      communities: [], // 通过用户选择的省市区获取该省市区里面的小区列表
      spotList: [], // 固定小区
      optionsProvince: [], // 选择则框里面的省列表
      optionsCity: [], // 选择框里面的市列表
      optionsDistrict: []// 选择框里面的区列表
    }
  },
  /**
   * @description 初始化界面
   */
  created () {
    this.getProvinces()
  },
  methods: {
    /**
     * @description 通过小区id获得相应小区的广告位列表
     * @param communityId
     */
    getSpotsByCommunity (communityId) {
      this.dialogTableVisible = true
      communityApi.getSpotsByCommunity(communityId).then(data => {
        this.spotList = data.data
      })
    },
    /**
     * @description 获得省列表
     */
    getProvinces () {
      communityMapApi.getProvinceList().then(res => {
        this.optionsProvince = res
      })
    },
    /**
     * @description 通过省获得市列表
     */
    getCities () {
      communityMapApi.getCityList(this.province).then(res => {
        this.optionsCity = res
      })
    },
    /**
     * @description 通过市获得区列表
     */
    getDistricts () {
      communityMapApi.getDistrictList(this.city).then(res => {
        this.optionsDistrict = res
      })
    },
    /**
     * 通过省市区获得相应的小区列表
     */
    geCommunities () {
      communityMapApi.getCommunityList(this.province, this.city, this.district).then(res => {
        this.communities = res
      })
    },
    /**
     * @description 通过经纬度在地图上定位小区位置
     * @param lng
     * @param lat
     */
    searchAddress (lng, lat) {
      this.position.lng = lng
      this.position.lat = lat
    }
  }
}
</script>
<style>
  .map {
    width: 80%;
    height: 300px;
  }
</style>
